<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:fragment="head">
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.3/dist/bootstrap-table.min.css" rel="stylesheet">

    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.3/dist/bootstrap-table.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <link href="//cdn.staticfile.org/layui/2.9.7/css/layui.css" rel="stylesheet">
    <script src="//cdn.staticfile.org/layui/2.9.7/layui.js"></script>
    <style>
        /* 使右侧导航项靠右 */
        .layui-nav-right {
            float: right;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <ul class="layui-nav" th:fragment="nav" style="background-color: #1b5384;">
        <li class="layui-nav-item"><a href="/index" style="font-size: large;">党务信息管理</a></li>
        <!-- 右侧导航项 -->
        <!-- <li class="layui-nav-item layui-nav-right" id="loginBtn"><a href="/login">登录</a></li> -->
        <li class="layui-nav-item layui-nav-right" id="logoutBtn"><a href="/">退出</a></li>
    </ul>

    <div>
        <div class="layui-container">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-row">
                        <form action="/search">
                            <div class="layui-col-xs4">
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <input type="search" name="keyword" value="" lay-verify="required"
                                            placeholder="搜素请输入名字" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs2">
                                <!-- <button type="" class="layui-btn layui-btn-normal">搜索</button> -->
                                <button type="button" class="layui-btn layui-bg-blue" onclick="add()">新增</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <table class="layui-table" lay-even lay-skin="line" lay-size="lg">
                <colgroup>
                    <col width="150">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名字</th>
                        <th>性别</th>
                        <th>入党日期</th>
                        <th>职位</th>
                        <th>电话</th>
                        <th>地址</th>
                        <th>身份证</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="m:${members}">
                        <td th:text="${m.id}">1</td>
                        <td th:text="${m.name}">木子</td>
                        <td th:text="${m.gender}">男</td>
                        <td th:text="${m.inDate}">2024年6月19日</td>
                        <td th:text="${m.position}">灵岛</td>
                        <td th:text="${m.phone}">6666</td>
                        <td th:text="${m.address}">北京xxx</td>
                        <td th:text="${m.idCard}">666666666</td>
                        <td>
                            <button type="button" class="layui-btn layui-bg-green"
                                th:onclick="'update('+${m.id}+')'">编辑</button>
                            <button type="button" class="layui-btn layui-btn-danger"
                                th:onclick="'del('+${m.id}+')'">删除</button>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
    <script>
        function add() {
            window.location.href = "/add"
        }

        function update(id) {
            window.location.href = "/pmember/" + id
        }

        function del(id) {
            layer.confirm('确定要删除这条吗？', {
                btn: ['删除', '取消']
            }, function () {
                $.get("/pmember/delete/" + id, function (data) {
                    if (data.code === 200) {
                        layer.msg('删除OK！');
                        setTimeout(() => {
                            window.location.reload();
                        }, 1200);
                    }
                })
            }, function () {

            });
        }
    </script>

</body>

</html>